<template>
  <div class="demo">
    <div class="demo-title">自定义字段名</div>
    <div class="demo-content">
      <Cascader
        v-model:value="value"
        :field-names="{ label: 'name', value: 'code', children: 'items' }"
        :options="options"
        placeholder="Please select"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Cascader from '@sscd/cascader';
  import type { CascaderProps } from '@sscd/cascader';
  const value = ref<string[]>([]);
  const options: CascaderProps['options'] = [
    {
      code: 'zhejiang',
      name: 'Zhejiang',
      items: [
        {
          code: 'hangzhou',
          name: 'Hangzhou',
          items: [{ code: 'xihu', name: 'West Lake' }],
        },
      ],
    },
    {
      code: 'jiangsu',
      name: 'Jiangsu',
      items: [
        {
          code: 'nanjing',
          name: 'Nanjing',
          items: [{ code: 'zhonghuamen', name: 'Zhong Hua Men' }],
        },
      ],
    },
  ];
</script>
